<template>

    <div class="user-info">

        <template v-if="user">
            <el-popover
                placement="right"
                width="300"
                trigger="click">
                <el-link type="primary" slot="reference">{{ user.nickname || user.userId }}</el-link>
                <p>渠道号: {{ user.source }}</p>
                <p>用户ID: {{ user.userId }}</p>
                <p>玩家ID: {{ user.playerId }}</p>
                <p>账号: {{ user.username || '-' }}</p>
                <p>昵称: {{ user.nickname }}</p>
                <p>手机号: {{ user.mobile || '-' }}</p>
<!--                <p>登录方式: {{ user.loginWay }}</p>-->
                <p>设备码: {{ user.uuid || '-' }}</p>
<!--                <p>IDFA: {{ user.idfa || '-' }}</p>-->
<!--                <p>IMEI: {{ user.imei || '-' }}</p>-->
<!--                <p>OAID: {{ user.oaid || '-' }}</p>-->
                <p>注册时间: {{ user.created_at }}</p>
                <p>注册IP: {{ user.register_ip }}</p>
                <p>最后登录: {{ user.login_at }}</p>
                <p>登录IP: {{ user.ip }}</p>
            </el-popover>
        </template>
        <template v-else>
            {{ userId }}
        </template>

    </div>
</template>

<script>
export default {
    name: "UserInfo",
    props: {
        userId: {
            // type: [Number, Object, Null],
            // required: true
            default () {
                return '';
            }
        },
        user: {
            type: [Object, null],
        }
    },
    data() {
        return {};
    },
    watch: {
        data() {
            // this.user = this.data;
        }
    },
    methods: {
        // getData() {
        //     this.$store.dispatch('user/Show').then(res => {
        //         this.user = res.data;
        //     });
        // }
    },
    created() {
        // if (this.data) this.user = this.data;
    }
}
</script>

<style lang="scss" scoped>
//.user-info {
p {
    /*height: 30px;*/
    line-height: 30px;
    border-bottom: 1px solid #eee;
    font-size: 12px;
}

.el-avatar {
    vertical-align: middle;
}

//}
</style>
